<template>
	<div class="el_date_picker_root">
	  <h2>选择日期范围</h2>
	  <h3>可在一个选择器中便捷地选择一个时间范围</h3>
	  	<el-date-picker
		  v-model="value1"
		  type="daterange"
		  unlink-panels
		  range-separator="至"
		  start-placeholder="开始日期"
		  end-placeholder="结束日期"
		  format="yyyy-MM-dd"
		  value-format="yyyy-MM-dd"
		  >
		</el-date-picker>
		
		<el-date-picker
		  v-model="value2"
		  unlink-panels
		  type="daterange"
		  range-separator="至"
		  start-placeholder="开始日期"
		  end-placeholder="结束日期"
		  format="yyyy-MM-dd HH:mm:ss"
		  value-format="yyyy-MM-dd HH:mm:ss"
		  :default-time="['00:00:00', '23:59:59']"
		  >
		</el-date-picker>
		
		<el-date-picker
		  v-model="value3"
		  type="datetimerange"
		  range-separator="至"
		  start-placeholder="开始时间"
		  end-placeholder="结束时间"
		  format="yyyy-MM-dd HH:mm:ss"
		  value-format="yyyy-MM-dd HH:mm:ss"
		  :default-time="['00:00:00', '23:59:59']"
		  unlink-panels
		  style="width:360px"
		></el-date-picker>
	</div>
	
</template>
<script>
	export default {
		name:'el_date_picker',
		data() {
			return {
				value1:'',
				value2:'',
				value3:'',
			}
		}
	}
</script>

<style>
.el_date_picker_root {
  margin-left: 300px;
  margin-right: 300px;
  text-align: left;
}
</style>